<template>
  <div id="app-container">
    <div>
      <h3 style="text-align: left;">待处理服务</h3>
    </div>

    <!--条件查询表单-->
    <el-form :inline="true" class="demo-form-inline">

      <!--服务状态 -->
      <el-form-item label="服务状态">
        <el-select v-model="queryServiceDisplayVo.serviceStatusId" clearable placeholder="请选择" @change="getList(-1)">
          <el-option
            v-for="serviceStatus in serviceStatusList"
            :key="serviceStatus.id"
            :label="serviceStatus.status"
            :value="serviceStatus.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="签约机构">
        <el-select v-model="queryServiceDisplayVo.organizationId" clearable placeholder="请选择" @change="getList(-1)">
          <el-option
            v-for="organization in organizationList"
            :key="organization.id"
            :label="organization.title"
            :value="organization.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="医生团队">
        <el-select v-model="queryServiceDisplayVo.teamId" clearable placeholder="请选择" @change="getList(-1)">
          <el-option
            v-for="team in teamList"
            :key="team.id"
            :label="team.name"
            :value="team.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="服务包">
        <el-select v-model="queryServiceDisplayVo.packerId" clearable placeholder="请选择" @change="getList(-1)">
          <el-option
            v-for="packages in packageList"
            :key="packages.id"
            :label="packages.name"
            :value="packages.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="预约日期">
        <el-date-picker
          v-model="queryServiceDisplayVo.startTime"
          type="datetime"
          placeholder="请选择日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"/>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="queryServiceDisplayVo.endTime"
          type="datetime"
          placeholder="请选择日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"/>
      </el-form-item>

      <el-form-item>
        <el-input v-model="queryServiceDisplayVo.name" placeholder="请输入关键字"/>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getList(-1)">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>

      <el-button type="default" @click="handleExport">导出</el-button>

      <router-link to="/service/add">
        <el-button type="default" >新增服务</el-button>
      </router-link>

      <i class="el-icon-nested"></i>
      <i class="el-icon-menu"></i>
    </el-form>

    <!--数据显示列表-->
    <el-table ref="multipleTable" :stripe="true" :data="dataList" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>

      <el-table-column prop="id"  label="编号" width="120"></el-table-column>

      <el-table-column prop="name" label="姓名" width="140"></el-table-column>

      <el-table-column prop="code" label="身份证号" width="140"></el-table-column>

      <el-table-column prop="phone" label="手机号码" width="140"></el-table-column>

      <el-table-column prop="status" label="服务状态" width="120"></el-table-column>

      <el-table-column prop="pageName" label="服务包" width="120"></el-table-column>

      <el-table-column prop="itemName" label="服务项目" width="120"></el-table-column>

      <el-table-column prop="submitTime" label="申请时间" width="120"></el-table-column>

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">

          <router-link :to="'/service/detail/' + scope.row.id">
            <el-link type="primary" size="mini" icon="el-icon-edit">查看详情</el-link>
          </router-link>
          <router-link :to="'/service/edit/' + scope.row.id">
            <el-link type="primary" size="mini" icon="el-icon-edit">编辑</el-link>
          </router-link>

        </template>
      </el-table-column>
    </el-table>

    <!--分页栏-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 3, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

  </div>
</template>
<script>
import service from "../../../api/service";
import packagePlus from "../../../api/packagePlus";
import organization from "../../../api/organization";
import team from "../../../api/admin/team";
import axios from "axios";
import fileDownload from "js-file-download";

  export default {
    data(){
      return {
        listLoading: true,                // 加载数据
        queryServiceDisplayVo: {},                  // 查询条件对象
        currentPage: 1,                   // 当前页
        pageSize: 2,                      // 每页记录数
        dataList:[],                      // 分页数据
        total: 0,                         // 总记录数
        serviceStatusList: [],
        organizationList: [],
        teamList: [],
        packageList: []

      }
    },

    methods: {
      handleSelectionChange(){

      },
      getList(value){
        if(value == -1){
          this.currentPage = 1
        }
        service.getList(this.currentPage, this.pageSize, this.queryServiceDisplayVo).then(res => {
          this.dataList = res.data.data;
          this.total = res.data.total;
        });
      },
      resetData(){
        this.queryServiceDisplayVo = {};
        this.getList();

      },
      // 服务状态查询
      getServiceStatusList(){
        service.getAllServiceStatus().then(res => {
          this.serviceStatusList = res.data;
        });
      },
      // 机构查询
      getOrganizationList(){
        organization.getAll().then(res => {
          this.organizationList = res.data;
        });
      },
      // 团队状态查询
      getTeamList(){
        team.queryAll().then(res => {
          this.teamList = res.data;
        });
      },
      // 服务包查询
      getPackageList(){
        packagePlus.queryAll().then(res => {
          this.packageList = res.data;
        });
      },
      // 每页记录数发生变化
      handleSizeChange(size){
        this.pageSize = size;
        this.getList();
      },
      // 当前页发生变化
      handleCurrentChange(current){
        this.currentPage = current;
        this.getList();
      },
      // 导出
      handleExport(){
        axios({
          method: 'post',
          url: "http://localhost:8080/serviceDisplay/export",
          responseType: 'blob', // 返回类型为数据流
          data: this.queryServiceDisplayVo // 需要传参的话，在这传
        }).then(res => {
          if (res && res.data) {
            // 调用js-file-download下载文件，第一个参数是数据流，第二个参数是文件名
            fileDownload(res.data, "服务数据.xlsx")
          }
        })
      }
    },
    created(){
      this.getList();
      this.getServiceStatusList();
      this.getOrganizationList();
      this.getTeamList();
      this.getPackageList();
    }
  }
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
